import { calculateDimension, isVideoWidthFull } from './aspectRatio'

/**
 * 计算视频的实际播放尺寸
 * @param {Object} params - 参数对象
 * @param {number} params.containerWidth - 容器宽度
 * @param {number} params.containerHeight - 容器高度
 * @param {string} params.aspectRatio - 视频宽高比，例如 '16/9'
 * @returns {Object} 返回视频的实际尺寸和相关信息
 */
export function calculateVideoDimensions({ containerWidth, containerHeight, aspectRatio }) {
  // 判断视频是宽度填满还是高度填满
  const isWidthFull = isVideoWidthFull(
    {
      getBoundingClientRect: () => ({
        width: containerWidth,
        height: containerHeight
      })
    },
    aspectRatio
  )

  let videoWidth, videoHeight
  if (isWidthFull) {
    // 如果宽度填满，使用容器宽度计算高度
    videoWidth = containerWidth
    videoHeight = calculateDimension(aspectRatio, videoWidth, 'width')
  } else {
    // 如果高度填满，使用容器高度计算宽度
    videoHeight = containerHeight
    videoWidth = calculateDimension(aspectRatio, videoHeight, 'height')
  }

  // 计算视频外边距（左右两侧各一半）
  const videoMargin = Math.max(0, (containerWidth - videoWidth) / 2)

  return {
    width: videoWidth,
    height: videoHeight,
    margin: videoMargin,
    isWidthFull
  }
}

/**
 * 设置元素的居中样式
 * @param {HTMLElement} element - 要设置样式的元素
 * @param {Object} dimensions - 尺寸信息
 * @param {number} dimensions.width - 宽度
 * @param {number} dimensions.height - 高度
 */
export function applyVideoDimensionsStyle(element, dimensions) {
  if (!element) return

  element.style.width = `${dimensions.width}px`
  element.style.height = `${dimensions.height}px`
  element.style.position = 'absolute'
  element.style.left = '50%'
  element.style.top = '50%'
  element.style.transform = 'translate(-50%, -50%)'
}
